<template>
  <view class="wrapper">
    <uv-sticky  customNavHeight="0" bgColor="#fff">
      <view class="titleName">{{ params.title }}</view>
    </uv-sticky>
    <PageBody :properties="pageBody">
      <template v-slot:body>
        <view class="chat_wrapper">
          <view class="chatmsg_item" v-for="it in chatMsgList">
            <view class="chat_member">
              <view>
                <uv-avatar :src="it.memberAvatar"></uv-avatar>
              </view>
              <view class="member_right">
                <view>
                  <uv-text color="#909399" :text="it.memberName"/>
                </view>
                <view>
                  <uv-text color="#909399" size="12" :text="it.createTime"/>
                </view>
              </view>
            </view>
            <view class="chat_msg_order_body_wrapper" v-if="it.msgType===4">
              <view class="chat_msg_order_body">
                <OrderList :isLast="true"  type="3" :datas="[]" :orderNo="it.content.orderNo"/>
              </view>
            </view>
            <view class="chat_msg_body" v-else-if="it.msgType===1">
              <uv-text color="#ffffff" size="15" :text="it.content"/>
            </view>
          </view>
        </view>
      </template>
    </PageBody>
  </view>
</template>

<script>
import {mixins} from './index.js'

export default {
  mixins: [mixins]
}
</script>

<style>
page {
  background: white !important;
}
.titleName{
  text-align: center;
  background-color: #909399;
  line-height: 60rpx;
  color: white;
}

.chat_wrapper {
  background: white;
}

.chatmsg_item {
  width: 100%;
  margin: 60rpx 0;
}

.chat_member {
  display: flex;
  align-items: center;
}

.member_right {
  margin-left: 20rpx;
}
.chat_msg_order_body_wrapper{
  margin-left: 60rpx;
  width: 90%;
  padding: 20rpx;
}
.chat_msg_order_body{
  border-radius: 15rpx;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}
.chat_msg_body {
  word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
  white-space: normal; /* 允许换行 */
  width: 80%;
  padding: 20rpx;
  margin-left: 60rpx;
  border-radius: 20rpx;
  background-color: #909399;
  color: white;
}
</style>
